// 顶部新增导入
import React from "react";
import { NavLink, Outlet } from "react-router-dom";

const ManageLayout: React.FC = () => {
  // 新增状态管理
  // 导航项配置
  const navItems = [
    { path: "soldierlist", text: "a" },
    { path: "officerlist", text: "b" },
    { path: "civilianlist", text: "c" }
  ];
  return (
    <div className="flex h-screen bg-gray-50">
      {/* 左侧导航栏 */}
      <nav className="w-64 p-4 bg-white shadow-md">
        {navItems.map((item) => (
          <NavLink
            key={item.path}
            to={item.path}
            className={({ isActive }) => 
              `block p-3 mb-2 rounded transition-colors
              ${isActive 
                ? 'bg-blue-50 text-blue-600 font-medium' 
                : 'text-gray-600 hover:bg-gray-100'}`
            }
          >
            {item.text}
          </NavLink>
        ))}
      </nav>
      
      {/* 右侧内容区域 */}
      <main className="flex-1 p-6 overflow-auto">
        <Outlet/>
      </main>
    </div>
  )
}

export default ManageLayout;
